<template>
  <div>
    <!-- tab切换表单 -->
    <div>
      <tab-helper :paneList="paneList">

        <!-- 原材料获取 -->
        <div slot="1" class="addProcessManagement-content">
          <!-- 材料 -->
          <div>
            <div class="addProcessManagement-title">工艺：制浆
              <el-button @click="add1()" size="small" type="primary" class="addProcessManagement-btn">新增入料
              </el-button>
            </div>
            <div class="addProcessManagement-table">

              <normal-table
                :tableData="tableData1"
                :paginationConfig="paginationConfig"
                :tableLabel="tableLabel1"
                :operationConfig="operationConfig"
                :operationList="operationList1"
                @event="handleEvent1"
                @changePage="changePage1"></normal-table>
            </div>
          </div>

          <el-dialog
            title="添加入料"
            :visible.sync="showWindow1"
            width="30%"
            class="form">
            <!-- form表单 -->
            <div class="formData">
              <normal-form
                :formModel="addFormModel1"
                :config="addConfig1"
                :plus="plus"/>
            </div>
            <span slot="footer" class="form-footer">
                    <el-button type="primary" @click="makeSure1()" class="confirm">确 定</el-button>
                    <el-button @click="showWindow1 = false">取 消</el-button>
                    </span>
          </el-dialog>
        </div>

        <!-- 生产制造 -->
        <div slot="2" class="addProcessManagement-content">
          <div>
            <div class="addProcessManagement-title">工艺：制浆
              <el-button @click="add2()" size="small" type="primary" class="addProcessManagement-btn">新增能耗
              </el-button>
            </div>
            <div class="addProcessManagement-table">

              <normal-table
                :tableData="tableData2"
                :paginationConfig="paginationConfig"
                :tableLabel="tableLabel2"
                :operationConfig="operationConfig"
                :operationList="operationList2"
                @event="handleEvent2"
                @changePage="changePage2"></normal-table>
            </div>
          </div>

          <el-dialog
            title="添加能耗"
            :visible.sync="showWindow2"
            width="30%"
            class="form">
            <!-- form表单 -->
            <div class="formData">
              <normal-form
                :formModel="addFormModel2"
                :config="addConfig2"
                :plus="plus"/>
            </div>
            <span slot="footer" class="form-footer">
                    <el-button type="primary" @click="makeSure2()" class="confirm">确 定</el-button>
                    <el-button @click="showWindow2 = false">取 消</el-button>
                    </span>
          </el-dialog>
        </div>

        <div slot="3" class="addProcessManagement-content">
          <div>
            <div class="addProcessManagement-title">
              工艺：制浆
              <el-button @click="add3()" size="small" type="primary" class="addProcessManagement-btn">新增能源
              </el-button>
            </div>
            <div class="addProcessManagement-table">

              <normal-table
                :tableData="tableData3"
                :paginationConfig="paginationConfig"
                :tableLabel="tableLabel3"
                :operationConfig="operationConfig"
                :operationList="operationList3"
                @event="handleEvent3"
                @changePage="changePage3"></normal-table>
            </div>
          </div>

          <el-dialog
            title="添加能源"
            :visible.sync="showWindow3"
            width="30%"
            class="form">
            <!-- form表单 -->
            <div class="formData">
              <normal-form
                :formModel="addFormModel3"
                :config="addConfig3"
                :plus="plus"/>
            </div>
            <span slot="footer" class="form-footer">
                    <el-button type="primary" @click="makeSure3()" class="confirm">确 定</el-button>
                    <el-button @click="showWindow3 = false">取 消</el-button>
                    </span>
          </el-dialog>

        </div>

        <!-- 使用 -->
        <div slot="4" class="addProcessManagement-content">
          <div>
            <div class="addProcessManagement-title">工艺：制浆
              <el-button @click="add4()" size="small" type="primary" class="addProcessManagement-btn">新增产物
              </el-button>
            </div>
            <div class="addProcessManagement-table">

              <normal-table
                :tableData="tableData4"
                :paginationConfig="paginationConfig"
                :tableLabel="tableLabel4"
                :operationConfig="operationConfig"
                :operationList="operationList4"
                @event="handleEvent4"
                @changePage="changePage4"></normal-table>
            </div>
          </div>
          <el-dialog
            title="添加产物"
            :visible.sync="showWindow4"
            width="30%"
            class="form">
            <!-- form表单 -->
            <div class="formData">
              <normal-form
                :formModel="addFormModel4"
                :config="addConfig4"
                :plus="plus"/>
            </div>
            <span slot="footer" class="form-footer">
                    <el-button type="primary" @click="makeSure4()" class="confirm">确 定</el-button>
                    <el-button @click="showWindow4 = false">取 消</el-button>
                    </span>
          </el-dialog>
        </div>
      </tab-helper>
    </div>
  </div>
</template>

<script>
import TabHelper from '@/components/TabHelper'
import NormalForm from '@/components/NormalForm'
import NormalTable from '@/components/NormalTable'
import NormalFormPlus from '@/components/NormalFormPlus'

export default {
  components: {
    TabHelper,
    NormalForm,
    NormalFormPlus,
    NormalTable
  },
  data() {
    return {
      showWindow1: false,
      showWindow2: false,
      showWindow3: false,
      showWindow4: false,
      plus: {},
      tableData1: [
        {
          fileName: '聚乙烯',
          totalNum: '10kg',
          exportNum: '主料',
          errorNum: '排放因子',
          errorNum1: '聚乙烯',
        },
      ],
      operationList1: [
        {
          name: '查看',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '删除',
          order: 2,
          buttonClass: 'danger',
          plus: {}
        }
      ],
      tableLabel1: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "fileName",
          label: "材料名称",
          width: 200
        },
        {
          prop: "totalNum",
          label: "数量",
          width: 100
        },
        {
          prop: "exportNum",
          label: "材料类型",
          width: 200
        },
        {
          prop: "errorNum",
          label: "匹配类型",
          width: 200
        },
        {
          prop: "errorNum1",
          label: "因子/核算产品",
          width: 200
        },
      ],
      addConfig1: [
        {
          id: '1',
          type: 'input',
          model: 'modelName',
          name: '材料名称',
          edit: true,
          props: {
            placeholder: '请输入材料名称',
          }
        },
        {
          id: '2',
          type: 'select',
          model: 'modelName',
          name: '材料类型',
          edit: true,
          props: {
            placeholder: '请输入材料类型',
          }
        },
        {
          id: '4',
          type: 'input',
          model: 'modelName',
          name: '核算数量',
          edit: true,
          props: {
            placeholder: '核算数量',
            options: [
              {value: '1', label: '1'},
              {value: '2', label: '2'}
            ]
          }
        },
        {
          id: '4',
          type: 'select',
          model: 'modelName',
          name: '单位',
          edit: true,
          props: {
            placeholder: '单位',
            radios: [
              {value: '1', label: '1'},
              {value: '2', label: '2'}
            ]
          },

        },

      ],
      addFormModel1: {},
      /////////////
      tableData2: [
        {
          fileName: '电力',
          totalNum: '10kwh',
          exportNum: '排放因子',
          errorNum: '电力',
          errorNum1: '0.7',
          errorNum2: '0.729kgCO2e',
          errorNu3: '1.43',
          errorNum4: '--',
        },
      ],
      operationList2: [
        {
          name: '查看',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '删除',
          order: 2,
          buttonClass: 'danger',
          plus: {}
        }
      ],
      tableLabel2: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "fileName",
          label: "能耗名称",
          width: 100
        },
        {
          prop: "totalNum",
          label: "数量",
          width: 50
        },
        {
          prop: "exportNum",
          label: "匹配类型",
          width: 100
        },
        {
          prop: "errorNum",
          label: "因子/核算产品",
          width: 150
        },
        {
          prop: "errorNum1",
          label: "换算比例",
          width: 200
        },
        {
          prop: "errorNum2",
          label: "排放系数",
          width: 100
        },
        {
          prop: "errorNum3",
          label: "排放量(kgCO2e)",
          width: 100
        },
        {
          prop: "errorNum4",
          label: "备注",
          width: 100
        }

      ],
      addConfig2: [
        {
          id: '1',
          type: 'input',
          model: 'modelName',
          name: '能耗名称',
          edit: true,
          props: {
            placeholder: '请输入能耗名称',
          }
        },
        {
          id: '2',
          type: 'input',
          model: 'modelName',
          name: '能耗数量',
          edit: true,
          props: {
            placeholder: '请输入能耗数量',
          }
        },
        {
          id: '3',
          type: 'select',
          model: 'modelName',
          name: '选择单位',
          edit: true,
          props: {
            placeholder: '单位',
            options: [
              {value: '1', label: '1'},
              {value: '2', label: '2'}
            ]
          }
        },
      ],
      addFormModel2: {},
      /////////////
      tableData3: [
        {
          fileName: '制浆',
          totalNum: '纸浆',
          exportNum: '243',
          errNum: '-'
        },
      ],
      operationList3: [
        {
          name: '编辑',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '删除',
          order: 2,
          buttonClass: 'danger',
          plus: {}
        }
      ],
      tableLabel3: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "fileName",
          label: "能源名称",
          width: 200
        },
        {
          prop: "totalNum",
          label: "产物",
          width: 200
        },
        {
          prop: "exportNum",
          label: "排放量(kgCO2e)",
          width: 200
        },
        {
          prop: "errNum",
          label: "描述",
          width: 260
        }

      ],
      addConfig3: [
        {
          id: '1',
          type: 'input',
          model: 'modelName',
          name: '能源名称',
          edit: true,
          props: {
            placeholder: '请输入能耗名称',
          }
        },
        {
          id: '2',
          type: 'input',
          model: 'modelName',
          name: '能源数量',
          edit: true,
          props: {
            placeholder: '请输入能耗数量',
          }
        },
        {
          id: '3',
          type: 'select',
          model: 'modelName',
          name: '选择单位',
          edit: true,
          props: {
            placeholder: '单位',
            options: [
              {value: '1', label: '1'},
              {value: '2', label: '2'}
            ]
          }
        },
      ],
      addFormModel3: {},
      /////////////
      tableData4: [
        {
          fileName: '铝',
          totalNum: '1',
          exportNum: '是',
          errNum: 't',
          errNum1: '123.22'
        },
      ],
      operationList4: [
        {
          name: '编辑',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '删除',
          order: 2,
          buttonClass: 'danger',
          plus: {}
        }
      ],
      tableLabel4: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "fileName",
          label: "产物",
          width: 200
        },
        {
          prop: "totalNum",
          label: "产量",
          width: 200
        },
        {
          prop: "exportNum",
          label: "是否为主产物",
          width: 200
        },
        {
          prop: "errNum",
          label: "单位",
          width: 100
        },
        {
          prop: "errNum1",
          label: "排放量(kgCO2e)",
          width: 100
        },
      ],
      addConfig4: [
        {
          id: '1',
          type: 'input',
          model: 'modelName',
          name: '产物名称',
          edit: true,
          props: {
            placeholder: '请输入产物名称',
          }
        },
        {
          id: '2',
          type: 'input',
          model: 'modelName',
          name: '产物产量',
          edit: true,
          props: {
            placeholder: '请输入产物产量',
          }
        },
        {
          id: '3',
          type: 'select',
          model: 'modelName',
          name: '选择单位',
          edit: true,
          props: {
            placeholder: '单位',
            options: [
              {value: '1', label: '1'},
              {value: '2', label: '2'}
            ]
          }
        },
        {
          id: '4',
          type: 'radio',
          model: 'modelName',
          name: '是否为主产物',
          edit: true,
          props: {
            placeholder: '是否为主产物',
            radios: [
              {value: '是', label: '是'},
              {value: '否', label: '否'}
            ]
          },

        },

      ],
      addFormModel4: {},

      operationConfig: {select: false},
      paginationConfig: {
        total: 100,
        page: 1,
        pageSize: 10,
        show: true
      },
      // tab栏配置
      paneList: [
        {
          id: '1',
          label: '入料'
        },
        {
          id: '2',
          label: '能耗'
        },
        {
          id: '3',
          label: '能源产出'
        },
        {
          id: '4',
          label: '产物'
        }
      ],
    }
  },
  methods: {
    addProcess() {

    },
    add1() {
      this.showWindow1 = true
    },
    add2() {
      this.showWindow2 = true
    },
    add3() {
      this.showWindow3 = true
    },
    add4() {
      this.showWindow4 = true
    },
    makeSure1() {
      this.showWindow1 = false
    },
    makeSure2() {
      this.showWindow2 = false
    },
    makeSure3() {
      this.showWindow3 = false
    },
    makeSure4() {
      this.showWindow4 = false
    },

    handleEvent1() {
    },
    changePage1() {
    },

    handleEvent2() {
    },
    changePage2() {
    },

    handleEvent3() {
    },
    changePage3() {
    },

    handleEvent4() {
    },
    changePage4() {
    },
  }
}
</script>

<style lang="less" scoped>
.addProcessManagement-content {
  height: 200vh;
  width: 90vw;

  .addProcessManagement-title {
    padding-left: 10px;
    padding-top: 20px;
    font-size: 18px;
    font-weight: bold;
  }

  .addProcessManagement-table {
    height: 200px;
  }

  .addProcessManagement-btn {
    margin-left: 50px;
  }
}

</style>
